import { Component } from 'react'
// 类组件
// es6 Component基类    extends 继承
class AppHeader extends Component {
    
    constructor(props){
        // super 父类构造函数
        super(props)

        // 组件中的数据 除props之外，还有state自有状态
        // 子组件的state是指该组件内部用来保存数据的一个对象
        this.state = {
            //状态
            emoji: '😎'
        }
        console.log('1111');

        // setInterval(()=>this.changeEmoji,3000)
    }
        //onload
        //生命周期函数 组件挂载到页面后 
        componentDidMount(){
            console.log('2222');
            //组件已挂载
            setInterval(()=>this.changeEmoji(),5000);
        }
        componentDidUpdate(){
            console.log('update',this.state.emoji); 
        }

        //方法
        changeEmoji = () =>{
            // Component 内置方法 setState                                                  
            this.setState({
                emoji: this.state.emoji === '😎'? '😭' : '😎'
            })
        }
    

    //类里面的abstract方法,必须实现的
    //没有render 哪里来的html？
    render(){
        const {name} = this.props
        const {emoji} =  this.state
        return (
            <div className='app-header'>
                <h1 className='title'>{name}    {emoji}</h1>
            </div>
        )
    }
}



export default AppHeader